<template>
  <div>
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >系统设置</el-breadcrumb-item>
        <el-breadcrumb-item >扫码登陆</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 已经绑定 -->
    <div style="text-align: center;width: 100%;margin-top: 15vh;" v-show="isBind">
      <i class="iconfont icon-chenggong" style="color: #67C23A;font-size: 20px;"></i>
      <span>您的账户已经绑定激活过，是否更换绑定?</span></br></br>
      <el-button type="success" size="small" @click="changeBind">更换绑定</el-button>
    </div>

    <!-- 未绑定 -->
    <div v-show="isNotBind">
      <el-steps :active="activeIndex" finish-status="success" simple style="margin-top: 20px">
        <el-step title="绑定设备" ></el-step>
        <el-step title="验证用户身份和设备有效性" ></el-step>
        <el-step title="激活设备" ></el-step>
      </el-steps>
      <div class="scan-bind" v-show="this.activeIndex === 1">
        <span class="scan-title">步骤一：请扫描下面二维码绑定设备</span>
        <span>该二维码将在<strong style="color: red;">{{this.timer}}</strong>秒后过期，自动跳转到首页</span>
        <img :src="scancodeBind" class="scan-bind-img"/>
        <el-button type="success" size="small" @click="chancelChangeBind" v-show="this.wasActive">取消换绑</el-button>
      </div>

      <div class="scan-bind"  v-show="this.activeIndex === 2">
        <span class="scan-title">步骤二：验证用户身份和设备有效性</span>
        <span style="margin: 10px 0;">请在2分钟内完成输入并验证，剩余时间<strong style="color: red;">{{this.timer}}</strong>秒，超时后将自动那转至首页，届时步定流程将失败</span>
        <span ></span>
        <el-form label-position="right" label-width="100px" :model="formLabelAlign" style="width: 300px;margin: 0 auto;margin-top: 10px;">
          <el-form-item label="用户密码" >
            <el-input v-model="formLabelAlign.userPass" show-password></el-input>
          </el-form-item>
          <el-form-item label="激活码">
            <el-input v-model="formLabelAlign.activeCode"></el-input>
          </el-form-item>
          <el-button type="success" plain style="width: 300px;" @click="BindCDY">确认激活</el-button>
        </el-form>
      </div>

      <div class="scan-bind"  v-show="this.activeIndex === 3">
        <span class="scan-title">步骤三：请再次扫描二维码激活该设备</span>
        <span>该二维码将在<strong style="color: red;">{{this.timer}}</strong>秒后过期，自动跳转到首页</span>
        <img :src="scancodeJihuo" class="scan-bind-img"/>
      </div>
    </div>
  </div>
</template>

<script>
  import ScanApi from '@/api/scan'
  export default{
    data(){
      return{
        isBind:false,
        isNotBind:false,
        timer:300,
        activeIndex:1,
        formLabelAlign: {
          activeCode: '',
          userPass: ''
        },
        scancodeBind:'',
        scancodeJihuo:'',
        // 绑定random
        randomChar:'',
        userId:'',
        // 激活random
        activerandomChar:'',

        // timer1  绑定检测
        timer1:'',
        // timer2  激活检测
        timer2:'',

        // 是否已经绑定
        wasActive:''
      }
    },
    methods:{
      // 时间倒计时
      timerD(){
        let theTimer = setInterval(() => {
          if(this.timer <= 0){
            this.timer = 300
          }
          this.timer = this.timer -1
        },1000)
      },
      // 绑定激活码
      BindCDY(){
        ScanApi.bindCDY(this.formLabelAlign).then(res => {
          if(res.data.data === "OK"){
            this.activeIndex  = this.activeIndex + 1
          }else{
            this.$message.error(res.data.msg);
          }
        })
      },
      // 查询绑定状态
      checkBindStatus(){
        ScanApi.getBindStatus(this.randomChar).then(res => {
          if(res.data === "OK"){
            this.activeIndex  = this.activeIndex + 1
            clearInterval(this.timer1)
          }
        })
      },
      // 检测激活状态
      checkActive(){
        ScanApi.checkActiveStatus(this.activerandomChar).then(res => {
          console.log(res)
          if(res.data === true){
            this.$notify({
              title: '成功',
              message: '恭喜您，成功绑定',
              type: 'success'
            });
            clearInterval(this.timer2)
            
            // 更换成绑定成功的界面
            this.isBind = true
            this.isNotBind = false
          }
        })
      },
      // 获取绑定激活码
      getBindCode(){
        ScanApi.getScanCode().then(res => {
          this.scancodeBind = res.data.qCodeImg
          this.randomChar = res.data.randomChar
          this.userId = res.data.userId
          this.timer1 = setInterval(() =>{
            this.checkBindStatus()
          },3000)
        })
        this.timerD()
      },
      // 更换绑定
      changeBind(){
        this.isBind = false
        this.isNotBind = true
        this.getBindCode()
      },
      // 取消更换绑定
      chancelChangeBind(){
        this.isBind = true
        this.isNotBind = false
        // 摧毁timer
        clearInterval(this.timer1)
      }
    },
    created() {
      // 判断是否已经绑定
      ScanApi.checkIsBindActive().then(res => {
        if(res.data.code === "0000"){
          this.isBind = true
          this.wasActive = true
        }else{
          this.isNotBind = true
          this.wasActive = false
        }
      })
    },
    destroyed() {
      clearInterval(this.timer1)
      clearInterval(this.timer2)
    },
    watch:{
      activeIndex:function(newV,oldV){
        if(newV === 3){
          ScanApi.getActiveScanCode(this.randomChar,this.userId).then(res => {
            this.scancodeJihuo = res.data.qCodeImg
            this.activerandomChar = res.data.randomChar
            // 激活检测
            this.timer2 = setInterval(() =>{
              this.checkActive()
            },3000)
          })
        }
      }
    }
  }
</script>

<style scoped="scoped">
  .scan-bind{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
  }
  .scan-title{
    font-weight: 600;
    margin-bottom: 10px;
  }
  .scan-bind-img{
    width: 200px;
    height: 200px;
    margin: 10px auto;
  }
</style>
